<template>
	<div class="account-form">
		<img class="logo" src="@/assets/logo/logo.png" alt="logo" />
		<el-form
			ref="form"
			class="form"
			size="small"
			:model="form"
			:rules="rules"
			:disabled="saving"
			@submit.native.prevent
		>
			<transition name="fade-transform" mode="out-in">
				<div v-if="!isNext" key="prev">
					<el-form-item label="用户名" prop="mobile">
						<el-input
							prefix-icon="el-icon-user"
							placeholder="请输入用户名"
							v-model.trim="form.mobile"
							maxlength="11"
							auto-complete="off"
							@keyup.enter.native="submit"
						/>
					</el-form-item>
					<el-row :gutter="20" class="pt-1" v-if="!isNext">
						<el-col :span="12" :offset="6">
							<el-button
								size="small"
								type="primary"
								class="submit-btn"
								@click="submit"
								:loading="saving"
								:disabled="!form.mobile"
							>
								下一步
							</el-button>
						</el-col>
					</el-row>
				</div>
				<div v-else key="next">
					<el-form-item label="集团" prop="user_id">
						<cl-select
							v-model="form.user_id"
							style="width: 100%"
							placeholder="请选择集团"
						>
							<icon-svg
								slot="prefix"
								name="icon-personnel"
								style="margin-left: 5px"
							/>
							<el-option
								v-for="item in groupList"
								:key="item.user_id"
								:label="item.name"
								:value="item.user_id"
							/>
						</cl-select>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input
							prefix-icon="el-icon-lock"
							type="password"
							placeholder="请输入密码"
							v-model.trim="form.password"
							maxlength="20"
							auto-complete="off"
							show-password
							@keyup.enter.native="submit"
						/>
					</el-form-item>
					<!-- <el-form-item v-if="!isNext" label="验证码" class="captcha">
						<el-input
							placeholder="请输入图片验证码"
							maxlength="4"
							v-model="form.verifyCode"
							auto-complete="off"
							@keyup.enter.native="next"
						></el-input>

						<captcha
							ref="captcha"
							class="value"
							v-model="form.captchaId"
							@change="captchaChange"
						></captcha>
					</el-form-item> -->
					<el-row :gutter="20" class="pt-1">
						<el-col :span="12">
							<el-button
								size="small"
								plain
								class="submit-btn"
								@click="isNext = false"
								:disabled="saving"
							>
								上一步
							</el-button>
						</el-col>
						<el-col :span="12">
							<el-button
								size="small"
								type="primary"
								class="submit-btn"
								@click="submit"
								:loading="saving"
							>
								登录
							</el-button>
						</el-col>
					</el-row>
				</div>
			</transition>
		</el-form>
	</div>
</template>
<script>
import { appEnv } from "@/config/env";
import { uniqBy } from "@/utils";
import { validate } from "@/utils/validate";
let isDev = appEnv == "dev";
export default {
	data() {
		return {
			form: {
				mobile: isDev ? "17342969670" : "",
				password: isDev ? "aabb6688" : "",
				user_id: isDev ? 2782 : ""
			},
			rules: {
				mobile: [
					{ required: true, message: "请输入用户名" },
					{ pattern: validate.mobile, message: "格式不正确" }
				],
				password: [
					{ required: true, message: "请输入密码" },
					{ min: 6, max: 16, message: "密码长度应为6-16位" }
				],
				user_id: [{ required: true, message: "请选择集团" }]
			},
			groupList: [],
			isNext: false,
			saving: false
		};
	},
	methods: {
		async submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				if (!this.isNext) {
					this.saving = true;
					const { mobile } = this.form;
					const list = await this.$store
						.dispatch("common/getGroupList", { mobile })
						.done(() => {
							this.saving = false;
						});
					this.isNext = true;
					let groupList = uniqBy(list, "user_id");
					this.groupList = groupList;
					groupList.length > 0 && (this.form.user_id = groupList[0].user_id);
					return;
				}
				this.saving = true;
				// 登录;
				await this.$store.dispatch("selectUserLogin", this.form).done(() => {
					this.saving = false;
				});
				// 用户信息;
				// await this.$store.dispatch("userInfo");
				// 权限菜单;
				this.$router.push("/");
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.account-form {
	box-sizing: border-box;
	padding: 40px;
}
.logo {
	height: 60px;
	margin-bottom: 30px;
}
.submit-btn {
	width: 100%;
}
::v-deep {
	.el-form-item__label {
		font-size: 16px;
	}
}
</style>
